import 'package:flutter/material.dart';
import 'package:fantuike_app/constants.dart' show AppColors, Constants;
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'child_page/person_detail.dart';
import 'child_page/store_detail.dart';
import 'package:fantuike_app/router/commonRouter.dart';
class PersonPage extends StatefulWidget {
  @override
  _PersonPageState createState() => _PersonPageState();
}

class _PersonPageState extends State<PersonPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        child: AppBar(
          backgroundColor: Color(AppColors.AppBackColor),
          title: Text(""),
          elevation: 0.0,
          actions: <Widget>[
            IconButton(
                icon: Icon(
                    IconData(0xe643, fontFamily: Constants.IconFontFamily)),
                onPressed: () {
                  Navigator.push(
                      context,
                      new MaterialPageRoute(
                          builder: (context) => new PersonDetail()));
                }),
            SizedBox(
              width: 20.0,
            ),
            Stack(
              overflow: Overflow.visible,
              alignment: Alignment.center,
              children: <Widget>[
                Icon(IconData(0xe635, fontFamily: Constants.IconFontFamily)),
                Positioned(
                  child: Container(
                    width: 7.0,
                    height: 7.0,
                    alignment: Alignment.bottomCenter,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(5.0),
                        color: Color(AppColors.NotifyDotBg)),
                  ),
                  right: -1.0,
                  top: 8.0,
                )
              ],
            ),
            SizedBox(
              width: 20.0,
            )
          ],
        ),
        preferredSize:
            Size.fromHeight(MediaQuery.of(context).size.height * 0.060),
      ),
      body: SingleChildScrollView(
        child: Container(
          child: Column(
            children: <Widget>[
              // 第1部分(基础信息)
              BuildBasicWidget(),
              // 第2部分(会员)
              BuildMemberWidget(),
              // 第3部分(账户)
              BuildAccountWidget(),
              // 第4部分(轮播组件)
              BuildSwipperWidget(),
              // 第5部分(推荐有礼)
              BuildRecommendWidget(),
              // 第6部分(公共组件)
              BuildCommonWidget()
            ],
          ),
        ),
      ),
    );
  }
}

class BuildBasicWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 60.0,
      color: Color(AppColors.AppBackColor),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          // left
          Container(
            padding: const EdgeInsets.only(left: 10.0),
            child: CircleAvatar(
              radius: 25.0,
              backgroundImage: NetworkImage(
                  "https://upload-images.jianshu.io/upload_images/13222938-bd0773697b4bcd5a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/360/format/webp"),
            ),
          ),
          // center
          Expanded(
            child: Container(
                alignment: Alignment.center,
                padding: const EdgeInsets.only(bottom: 10.0, left: 15.0),
                width: 200.0,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Row(
                      children: <Widget>[
                        Text(
                          "豆芽菜,您好",
                          maxLines: 1,
                          style: TextStyle(
                              color: Color(AppColors.memberBtnColor),
                              fontSize: 14.0),
                          overflow: TextOverflow.ellipsis,
                        ),
                        Container(
                          margin: const EdgeInsets.only(left: 5.0),
                          alignment: Alignment.center,
                          width: 50.0,
                          height: 15.0,
                          child: Text(
                            "普通用户",
                            style: TextStyle(
                                color: Color(AppColors.memberBtnColor),
                                fontSize: 11.0),
                          ),
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(3.0),
                              color: Color(AppColors.CardBtnColor)),
                        )
                      ],
                    ),
                    SizedBox(
                      height: 5.0,
                    ),
                    Row(
                      children: <Widget>[
                        Text(
                          "ID:123456",
                          style:
                              TextStyle(color: Color(AppColors.memberBtnColor)),
                        ),
                        Container(
                          margin: const EdgeInsets.only(left: 5.0),
                          alignment: Alignment.center,
                          width: 40.0,
                          height: 15.0,
                          child: Text("未实名",
                              style: TextStyle(
                                  color: Color(AppColors.memberBtnColor),
                                  fontSize: 11.0)),
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(3.0),
                              color: Color(AppColors.CardBtnColor)),
                        )
                      ],
                    )
                  ],
                )),
          ),
          // right
          Container(
            decoration: BoxDecoration(
                // 0xffC5CFDF 0fxx97A5B9
                gradient: LinearGradient(
                    colors: [Color(0xffC5CFDF), Color(0xff97A5B9)]),
                borderRadius: BorderRadius.all(Radius.circular(20.0))),
            alignment: Alignment.centerRight,
            height: 35.0,
            width: 100.0,
            margin: const EdgeInsets.only(right: 10.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      "一派掌门",
                      style: TextStyle(
                          fontSize: 14.0, color: Color(AppColors.AppBackColor)),
                    ),
                    Text("4500积分",
                        style: TextStyle(
                          color: Color(AppColors.AppBackColor),
                          fontSize: 12.0,
                        ))
                  ],
                ),
                Icon(
                  IconData(0xe604, fontFamily: Constants.IconFontFamily),
                  size: 16.0,
                  color: Color(AppColors.AppBackColor),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}

// 会员组件
class BuildMemberWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
      padding: const EdgeInsets.only(left: 15.0, right: 10.0),
      alignment: Alignment.centerLeft,
      height: 45.0,
      decoration: BoxDecoration(
          color: Color(AppColors.memberBtnColor),
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(15.0), topRight: Radius.circular(15.0))),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Container(
            child: Row(
              children: <Widget>[
                Icon(
                  IconData(0xe625, fontFamily: Constants.IconFontFamily),
                  color: Color(AppColors.memberFontColor),
                ),
                SizedBox(
                  width: 3.0,
                ),
                Text(
                  "FAY会员",
                  style: TextStyle(
                      color: Color(AppColors.memberFontColor), fontSize: 16.0),
                ),
              ],
            ),
          ),
          Container(
            child: Row(
              children: <Widget>[
                Text(
                  "会员有效期:2018-10-31",
                  style: TextStyle(
                    color: Color(AppColors.memberFontColor),
                    fontSize: 13.0,
                  ),
                ),
                Container(
                  margin: const EdgeInsets.only(left: 5.0, right: 5.0),
                  height: 25.0,
                  width: 50.0,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      color: Color(AppColors.memberFontColor),
                      borderRadius: BorderRadius.all(Radius.circular(15.0))),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        "续费",
                        style: TextStyle(fontSize: 14.0),
                      ),
                      Container(
                        margin: const EdgeInsets.only(top: 3.0, left: 1.0),
                        alignment: Alignment.center,
                        child: Icon(
                          IconData(0xe604,
                              fontFamily: Constants.IconFontFamily),
                          size: 13.0,
                        ),
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

// 账户组件
class BuildAccountWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100.0,
      margin: const EdgeInsets.only(left: 10.0, right: 10.0, top: 10.0),
      alignment: Alignment.centerLeft,
      decoration: BoxDecoration(
          color: Color(AppColors.AppBackColor),
          borderRadius: BorderRadius.all(
            Radius.circular(12.0),
          ),
          boxShadow: <BoxShadow>[
            BoxShadow(blurRadius: 2.5, color: Color(AppColors.borderColor)),
          ]),
      child: Column(
        // crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Container(
            padding: const EdgeInsets.only(left: 15.0),
            height: 40.0,
            // alignment: Alignment.center,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Text(
                      "总收入",
                      style: TextStyle(
                          color: Color(AppColors.moneyColor), fontSize: 17.0),
                    ),
                    Text(
                      "(元)",
                      style: TextStyle(
                          color: Color(AppColors.moneyColor), fontSize: 14.0),
                    ),
                    SizedBox(width: 5.0),
                    Icon(
                      IconData(0xe63a, fontFamily: Constants.IconFontFamily),
                      color: Color(AppColors.moneyColor),
                      size: 13.0,
                    ),
                  ],
                ),
                Expanded(
                    child: Container(
                  margin: const EdgeInsets.only(left: 30.0),
                  child: Text(
                    "12345.00",
                    style: TextStyle(
                        color: Color(AppColors.moneyFontColor), fontSize: 17.0),
                  ),
                )),
                Container(
                  margin: const EdgeInsets.only(right: 20.0),
                  child: Row(
                    children: <Widget>[
                      Text(
                        "更多",
                        style: TextStyle(color: Color(0xffC8C8C8)),
                      ),
                      Icon(
                        IconData(0xe604, fontFamily: Constants.IconFontFamily),
                        color: Color(0xffC8C8C8),
                        size: 16.0,
                      )
                    ],
                  ),
                )
              ],
            ),
            decoration: BoxDecoration(
                border: Border(
                    bottom: BorderSide(width: 1.0, color: Color(0xffEEEEEE)))),
          ),
          Container(
            alignment: Alignment.center,
            height: 50.0,
            padding: const EdgeInsets.only(bottom: 5.0),
            child: Row(
              children: <Widget>[
                Expanded(
                    child: Container(
                  alignment: Alignment.center,
                  child: Container(
                    alignment: Alignment.center,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Container(
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                              Text(
                                "可结算",
                                style: TextStyle(
                                    color: Color(AppColors.moneyColor),
                                    fontSize: 14.0),
                              ),
                              Text(
                                "(元)",
                                style: TextStyle(
                                    color: Color(AppColors.moneyColor),
                                    fontSize: 12.0),
                              ),
                              Icon(
                                IconData(0xe604,
                                    fontFamily: Constants.IconFontFamily),
                                color: Color(AppColors.moneyColor),
                                size: 14.0,
                              )
                            ],
                          ),
                        ),
                        Container(
                          margin: const EdgeInsets.only(top: 1.0),
                          alignment: Alignment.center,
                          child: Text(
                            "1,234.00",
                            style: TextStyle(
                                color: Color(AppColors.moneyFontColor),
                                fontSize: 16.0),
                          ),
                        )
                      ],
                    ),
                  ),
                  decoration: BoxDecoration(
                      border:
                          Border(right: BorderSide(color: Color(0xffE5E5E5)))),
                )),
                Expanded(
                    child: Container(
                  alignment: Alignment.center,
                  child: Container(
                    alignment: Alignment.center,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Container(
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                              Text(
                                "待审核",
                                style: TextStyle(
                                    color: Color(AppColors.moneyColor),
                                    fontSize: 14.0),
                              ),
                              Text(
                                "(元)",
                                style: TextStyle(
                                    color: Color(AppColors.moneyColor),
                                    fontSize: 12.0),
                              ),
                              Icon(
                                IconData(0xe604,
                                    fontFamily: Constants.IconFontFamily),
                                color: Color(AppColors.moneyColor),
                                size: 14.0,
                              )
                            ],
                          ),
                        ),
                        Container(
                          margin: const EdgeInsets.only(top: 1.0),
                          alignment: Alignment.center,
                          child: Text(
                            "1,234.00",
                            style: TextStyle(
                                color: Color(AppColors.moneyFontColor),
                                fontSize: 16.0),
                          ),
                        )
                      ],
                    ),
                  ),
                  decoration: BoxDecoration(
                      border:
                          Border(right: BorderSide(color: Color(0xffE5E5E5)))),
                )),
                Expanded(
                    child: Container(
                        alignment: Alignment.center,
                        child: Container(
                          alignment: Alignment.center,
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                              Container(
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: <Widget>[
                                    Text(
                                      "已提现",
                                      style: TextStyle(
                                          color: Color(AppColors.moneyColor),
                                          fontSize: 14.0),
                                    ),
                                    Text(
                                      "(元)",
                                      style: TextStyle(
                                          color: Color(AppColors.moneyColor),
                                          fontSize: 12.0),
                                    ),
                                    Icon(
                                      IconData(0xe604,
                                          fontFamily: Constants.IconFontFamily),
                                      color: Color(AppColors.moneyColor),
                                      size: 14.0,
                                    )
                                  ],
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 1.0),
                                alignment: Alignment.center,
                                child: Text(
                                  "1,234.00",
                                  style: TextStyle(
                                      color: Color(AppColors.moneyFontColor),
                                      fontSize: 16.0),
                                ),
                              )
                            ],
                          ),
                        ))),
              ],
            ),
          )
        ],
      ),
    );
  }
}

// 轮播组件
class BuildSwipperWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<Widget> swiperList = [
      GestureDetector(
        onTap: () {
        Navigator.of(context).push(CommonRouter(StoreDetailPage()));
        },
        child: Container(
          width: 160.0,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Text("我的店铺",
                  style: TextStyle(
                      color: Color(AppColors.AppBackColor), fontSize: 20.0)),
              Text(
                "个人专属, 商品管理",
                style: TextStyle(
                    color: Color(AppColors.AppBackColor), fontSize: 14.0),
              )
            ],
          ),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(10.0)),
            color: Color(AppColors.storeBackgroudColor),
            boxShadow: <BoxShadow>[
              BoxShadow(color: Color(AppColors.shdowColor), blurRadius: 20.0)
            ],
          ),
        ),
      ),
      Container(
        width: 160.0,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text("我的下级",
                style: TextStyle(
                    color: Color(AppColors.AppBackColor), fontSize: 20.0)),
            Text("今日新增下级:10人",
                style: TextStyle(
                    color: Color(AppColors.AppBackColor), fontSize: 13.0)),
            Text("下级总人数:20人",
                style: TextStyle(
                    color: Color(AppColors.AppBackColor), fontSize: 13.0)),
            Text("累计获得:0.00元",
                style: TextStyle(
                    color: Color(AppColors.AppBackColor), fontSize: 13.0))
          ],
        ),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(10.0)),
          color: Color(AppColors.teamBackgroundColor),
          boxShadow: <BoxShadow>[
            BoxShadow(color: Color(AppColors.shdowColor), blurRadius: 20.0)
          ],
        ),
      ),
      Container(
        width: 160.0,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text("我的订单",
                style: TextStyle(
                    color: Color(AppColors.AppBackColor), fontSize: 20.0)),
            Text("业绩明细, 一目了然",
                style: TextStyle(
                    color: Color(AppColors.AppBackColor), fontSize: 14.0)),
          ],
        ),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(10.0)),
          color: Color(AppColors.orderBackgroundColor),
          boxShadow: <BoxShadow>[
            BoxShadow(color: Color(AppColors.shdowColor), blurRadius: 20.0)
          ],
        ),
      ),
      Container(
        width: 160.0,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text("我要推广",
                style: TextStyle(
                    color: Color(AppColors.AppBackColor), fontSize: 20.0)),
            Text("多种模式, 随意选择",
                style: TextStyle(
                    color: Color(AppColors.AppBackColor), fontSize: 14.0)),
          ],
        ),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(10.0)),
          color: Color(AppColors.extendBackgroundColor),
          boxShadow: <BoxShadow>[
            BoxShadow(color: Color(AppColors.shdowColor), blurRadius: 20.0)
          ],
        ),
      ),
      Container(
        width: 160.0,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text("月度报表",
                style: TextStyle(
                    color: Color(AppColors.AppBackColor), fontSize: 20.0)),
            Text("每月客情, 详尽分析",
                style: TextStyle(
                    color: Color(AppColors.AppBackColor), fontSize: 14.0)),
          ],
        ),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(10.0)),
          color: Color(AppColors.chartsBackgroundColor),
          boxShadow: <BoxShadow>[
            BoxShadow(color: Color(AppColors.shdowColor), blurRadius: 20.0)
          ],
        ),
      )
    ];

    ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
    return Container(
      margin: const EdgeInsets.only(top: 10.0),
      height: ScreenUtil().setHeight(260),
      alignment: Alignment.center,
      child: Swiper(
        itemCount: 5,
        itemBuilder: (BuildContext context, int index) {
          return swiperList[index];
        },
        controller: new SwiperController(),
        viewportFraction: 0.55,
        scale: 0.8,
      ),
    );
  }
}

// 推荐组件
class BuildRecommendWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(left: 5.0, right: 5.0),
      alignment: Alignment.center,
      height: 90.0,
      child: Image.asset(
        "assets/images/RecommendImg.png",
        fit: BoxFit.fill,
      ),
    );
  }
}

// 公共组件
class BuildCommonWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(bottom: 10.0, left: 10.0, right: 10.0),
      alignment: Alignment.center,
      height: 95.0,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Expanded(
            child: Container(
              height: 60.0,
              margin: const EdgeInsets.only(left: 5.0, right: 5.0),
              decoration: BoxDecoration(
                  color: Color(0xffF1FFD2),
                  borderRadius: BorderRadius.all(Radius.circular(5.0))),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(
                    IconData(0xe684, fontFamily: Constants.IconFontFamily),
                    color: Color(0xff8AA657),
                    size: 27.0,
                  ),
                  Text(
                    "客服",
                    style: TextStyle(color: Color(0xff8FAA5E), fontSize: 12.0),
                  )
                ],
              ),
            ),
          ),
          Expanded(
            child: Container(
              height: 60.0,
              margin: const EdgeInsets.only(left: 5.0, right: 5.0),
              decoration: BoxDecoration(
                  color: Color(0xffFFFADC),
                  borderRadius: BorderRadius.all(Radius.circular(5.0))),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(
                    IconData(0xe623, fontFamily: Constants.IconFontFamily),
                    color: Color(0xffEB9907),
                    size: 27.0,
                  ),
                  Text(
                    "帮助",
                    style: TextStyle(color: Color(0xffEA9804), fontSize: 12.0),
                  )
                ],
              ),
            ),
          ),
//          Expanded(
//            child: Container(
//              height: 60.0,
//              margin: const EdgeInsets.only(left: 5.0, right: 5.0),
//              decoration: BoxDecoration(
//                  color: Color(0xffF3EAF9),
//                  borderRadius: BorderRadius.all(Radius.circular(5.0))),
//              child: Column(
//                mainAxisAlignment: MainAxisAlignment.center,
//                children: <Widget>[
//                  Icon(
//                    IconData(0xe60b, fontFamily: Constants.IconFontFamily),
//                    color: Color(0xff8E6FC1),
//                    size: 30.0,
//                  ),
//                  Text(
//                    "积分商城",
//                    style: TextStyle(color: Color(0xff9376C4), fontSize: 12.0),
//                  )
//                ],
//              ),
//            ),
//          ),
          Expanded(
            child: Container(
              height: 60.0,
              margin: const EdgeInsets.only(left: 5.0, right: 5.0),
              decoration: BoxDecoration(color: Color(0xffFFEEE9)),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(
                    IconData(0xe68f, fontFamily: Constants.IconFontFamily),
                    color: Color(0xffE87252),
                    size: 30.0,
                  ),
                  Text(
                    "排行榜",
                    style: TextStyle(color: Color(0xffE87455), fontSize: 12.0),
                  )
                ],
              ),
            ),
          ),
          Expanded(
            child: Container(
              height: 60.0,
              margin: const EdgeInsets.only(left: 5.0, right: 5.0),
              decoration: BoxDecoration(color: Color(0xffE6F3FF)),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(
                    IconData(0xe63f, fontFamily: Constants.IconFontFamily),
                    color: Color(0xff6DA1CC),
                    size: 30.0,
                  ),
                  Text(
                    "关于我们",
                    style: TextStyle(color: Color(0xff6DA1CC), fontSize: 12.0),
                  )
                ],
              ),
            ),
          ),
        ],
      ),
      decoration: BoxDecoration(
          color: Color(AppColors.AppBackColor),
          borderRadius: BorderRadius.all(
            Radius.circular(12.0),
          ),
          boxShadow: <BoxShadow>[
            BoxShadow(blurRadius: 2.5, color: Color(AppColors.borderColor)),
          ]),
    );
  }
}
